<template>
    <div class="chartList">
        <Table :columns="rotationChartListData"
               :data="rotationChartList"
               show-header
               draggable
               border
               @on-drag-drop="dragOrder"
               size="small">

            <!--轮播图-->
            <template slot-scope="{ row, index }" slot="chart">
                <img :src="row.chartUrl" style="width: 150px;height: 60px">
            </template>

            <!--轮播图跳转url-->
            <template slot-scope="{ row, index }" slot="url">
                <div class="webUrl" @click="goURL(row)">{{row.webUrl}}</div>
            </template>

            <!--状态-->
            <template slot-scope="{ row, index }" slot="status">
                <!-- true-color="#13ce66" false-color="#ff4949" -->
                <i-switch v-model="row.status"
                          size="large"
                          :true-value="1"
                          :false-value="0"
                          false-color="#ff4949"
                          @on-change="changeStatus(row)">
                    <span slot="open">ON</span>
                    <span slot="close" style="font-size: 14px">OFF</span>
                </i-switch>
            </template>

            <!--编辑-->
            <template slot-scope="{ row, index }" slot="edit">
                <Button type="info" @click="edit(row, index)">编辑</Button>
            </template>

            <!--删除-->
            <template slot-scope="{ row, index }" slot="del">
                <Button type="error" @click="del(row, index)">删除</Button>
            </template>
        </Table>


        <!--课程更新信息-->
        <Modal v-model="updateChartFlag"
               draggable
               width="1000"
               :loading="true"
               @on-ok="okUpdateChart">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">轮播图更新</span>
            </p>

            <Form :model="chartInfo" :label-width="100">
                <!--轮播图URL-->
                <FormItem label="轮播图" style="margin-top: 10px">
                    <Tooltip placement="right" theme="light">
                        <div slot="content">
                            <p>轮播图URL</p>
                            <p style="color: #F00">200个字符以内</p>
                        </div>
                        <Input prefix="md-images"
                               v-model="chartInfo.chartUrl"
                               maxlength="200"
                               show-word-limit
                               placeholder="轮播图URL"
                               style="width: 800px"
                               clearable/>
                    </Tooltip>
                </FormItem>

                <FormItem label="轮播展示" style="margin-top: 10px">
                    <img :src="chartInfo.chartUrl" style="width: 300px;height: 144px">
                </FormItem>

                <!--跳转URL-->
                <FormItem label="跳转链接" style="margin-top: 20px">
                    <Tooltip placement="right" theme="light">
                        <div slot="content">
                            <p>跳转链接</p>
                            <p style="color: #F00">200个字符以内</p>
                        </div>
                        <Input prefix="ios-redo"
                               v-model="chartInfo.webUrl"
                               placeholder="跳转链接"
                               maxlength="200"
                               show-word-limit
                               style="width: 800px"
                               clearable/>
                    </Tooltip>
                </FormItem>

            </Form>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "",
        components: {},
        data() {
            return {
                rotationChartList: [],
                chartInfo: {
                    chartId: "",
                    chartUrl: "",
                    webUrl: "",
                    status: 0,
                    showOrder: "",
                },
                rotationChartListData: [
                    {title: "#", type: 'index', resizable: true, align: "center", width: 100},
                    {title: "轮播图", slot: 'chart', resizable: true, align: "center", width: 200},
                    {title: "跳转URL", slot: 'url', resizable: true, align: "left"},

                    {title: "状态", slot: 'status', resizable: true, align: "center", width: 100},
                    {title: "编辑", slot: 'edit', resizable: true, align: "center", width: 100},
                    {title: "删除", slot: 'del', resizable: true, align: "center", width: 100}
                ],
                updateChartFlag: false
            }
        },
        methods: {
            selectRotationChartList: function () {
                this.axios.get(`/home/rotationChart/rotationChartList`)
                    .then((data) => {
                        if (data.code == 200) {
                            this.rotationChartList = data.data
                        }
                    })
            },
            //跳转链接
            goURL: function (row) {
                window.open(row.webUrl, "_blank");
            },
            //拖拽排序
            dragOrder: function (fromIndex,toIndex) {
                let from = this.rotationChartList[fromIndex];
                if (fromIndex == toIndex) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '请勿将本条数据原地移动'
                    });
                }
                if (fromIndex > toIndex) {
                    this.rotationChartList.delete(fromIndex)
                    this.rotationChartList.insert(toIndex + 1, from)
                }
                if (fromIndex < toIndex && fromIndex - toIndex != -1) {
                    this.rotationChartList.delete(fromIndex)
                    this.rotationChartList.insert(toIndex, from)
                }
                if (fromIndex - toIndex == -1) {
                    this.rotationChartList.delete(fromIndex)
                    this.rotationChartList.insert(toIndex + 1, from)
                }
                // =================
                let ids = []
                for (let i of this.rotationChartList) {
                    ids.push(i.chartId)
                }
                this.axios.put(`/home/rotationChart/order`, ids)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '轮播图排序成功'
                            });
                            this.selectRotationChartList()
                        }
                    })
            },
            //修改状态
            changeStatus: function (row) {
                let data = {
                    status: row.status
                }
                this.axios.put(`/home/rotationChart/rotationChart/${row.chartId}`, data)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '状态修改成功'
                            });
                        }
                    })
            },
            //编辑
            edit: function (row, index) {
                this.updateChartFlag = true
                this.chartInfo = row
            },
            //确定更新
            okUpdateChart: function () {
                let data = {
                    chartUrl: this.chartInfo.chartUrl,
                    webUrl: this.chartInfo.webUrl,
                }
                this.axios.put(`/home/rotationChart/rotationChart/${this.chartInfo.chartId}`, data)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '轮播图更新成功'
                            });
                            this.updateChartFlag = false
                        }
                    })
            },
            //点击删除
            del: function (row, index) {
                this.axios.delete(`/home/rotationChart/rotationChart/${row.chartId}`)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '删除成功'
                            });
                            this.selectRotationChartList()
                        }
                    })
            }
        },
        mounted() {
            this.selectRotationChartList()
            this.Bus.$on("chart-add", (data) => {
                this.selectRotationChartList()
            })
        }
    }
</script>

<style scoped>

    .chartList .webUrl {
        margin: 0px -18px 0px -10px;
        padding: 20px 0px;
    }
</style>